<template>
<div class="table-wrap">
    <!--表格栏-->
    <el-table v-loading="loading" :data="tableList" :highlight-current-row="highlightCurrentRow" @selection-change="selectionChange" :element-loading-text="$t('action.loading')" :border="border" :stripe="stripe" :show-overflow-tooltip="showOverflowTooltip" :max-height="maxHeight" :size="size" :align="align" style="width:100%;" :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
        <el-table-column type="selection" width="50" v-if="showSelection" fixed="left"></el-table-column>
        <el-table-column type="index" width="50" v-if="showIndex"></el-table-column>
        <!-- 表头部分 -->
        <template v-for="column in tableHeaderList">
            <el-table-column header-align="center" align="center" :prop="column.prop" :label="column.label" :width="column.width" :min-width="column.minWidth" :fixed="column.fixed" :key="column.prop" :type="column.type" :formatter="column.formatter">
                <template slot-scope="scope">
                  <template v-if="!column.render">
                        <template v-if="column.formatter">
                            <div v-html="column.formatter(scope.row, column,scope.row[column.prop],scope.index)"></div>
                        </template>
                        <template v-else>
                            <span>{{scope.row[column.prop]}}</span>
                        </template>
                    </template>
                    <template v-else>
                        <expand-dom :column="column" :row="scope.row" :render="column.render" :index="index"></expand-dom>
                    </template>
                </template>
            </el-table-column>
        </template>

        <!-- 操作部分 -->
        <el-table-column :label="$t('action.operation')" :width="operationWidth" fixed="right" v-if="showOperation" header-align="center" align="center">
            <template slot-scope="scope">
              <!-- 编辑按钮 -->
              <kt-button
                icon="fa fa-edit"
                :label="$t('action.edit')"
                :show="showEditOperation"
                :perms="permsEdit"
                :size="size"
                @click="handleEdit(scope.row)"
              />
              <!-- 新增下级分类按钮 -->
              <kt-button
                icon="fa fa-edit"
                label="新增下级分类"
                :show="classification"
                type="success"
                :size="size"
                @click="SubclassificationMethod(scope.row)"
              />
              <kt-button
                label="下架"
                :show="showPushOperation"
                :size="size"
                v-if="scope.row.canSale == 1"
                type="success"
                @click="handleLower(scope.$index, scope.row)"
              />
              <kt-button
                label="上架"
                :show="groundings"
                :size="size"
                v-if="scope.row.canSale == 0"
                type="success"
                @click="grounding(scope.$index, scope.row)"
              />
                <!-- 删除按钮 -->
                <kt-button
                  icon="fa fa-trash"
                  :label="$t('action.delete')"
                  :show="showDeleteOperation"
                  :perms="permsDelete"
                  :size="size"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                />
                <!-- 详情按钮 -->
                <kt-button icon="fa fa-search" :label="$t('action.detail')" :show="showDetailOperation" :size="size" type="success" @click="handleDetail(scope.row)" />

<!--              查看上下级按钮-->
                <kt-button icon="fa fa-search" :label="'查看上下级明细'" :show="showSuperiorAndSubordinate" :size="size" type="success" @click="handleSuperiorAndSubordinate(scope.row)" />
                <!-- 修改金额按钮-->
                <kt-button icon="fa fa-update" :label="'修改金额'" :show="showUpdateIntegral" :size="size" type="success" @click="updateIntegral(scope.row)" />
                <!-- 修改积分按钮-->
                <kt-button icon="fa fa-search" :label="'修改积分'" :show="showUpdateMoney" :size="size" type="success" @click="updateMoney(scope.row)" />
                <kt-button icon="fa fa-add" :label="'新增下级分页'" :show="ShowAddJunior" :size="size" type="success" @click="AddJunior(scope.row)" />
              <!-- 启用按钮 -->
              <kt-button
                :label="'启用'"
                :show="startUsing"
                :size="size"
                type="success"
                v-if="scope.row.status == 2"
                @click="handleStartorDisable (scope.row ,'启用')"
              ></kt-button>
              <kt-button
                :label="'停用'"
                :show="blockUp"
                type="success"
                :size="size"
                v-if="scope.row.status == 1"
                @click="handleProhibitStatus(scope.row , '停用')"
              ></kt-button>
              <kt-button
                :label="'审核'"
                :show="conceal"
                :size="size"
                type="success"
                @click="Auditmethods(scope.$index, scope.row)"
              />
          <kt-button
            icon="fa fa-search"
            :label="'复盘'"
            :show="scope.row.checkStatus == 1"
            :size="size"
            type="success"
            @click="handleFinal(scope.row)"
          />
          <kt-button
            icon="fa fa-search"
            :label="'差异确认'"
            :show="scope.row.checkStatus == 2"
            :size="size"
            type="success"
            @click="handleConfirm(scope.row)"
          />
                <!-- 自定义按钮部分 -->
                <kt-button :label="customLabel" :show="showCustomOperation" :size="size" type="active" @click="handleCustom(scope.row)" />
            </template>
        </el-table-column>
    </el-table>

    <!--批量删除   分页栏-->
    <div class="toolbar">
        <!-- 批量删除按钮 -->
        <kt-button style="float:left;" v-if="showBatchDelete & showSelection" :label="$t('action.batchDelete')" :perms="permsDelete" :size="size" type="danger" @click="handleBatchDelete()" :disabled="this.selections.length===0" />
        <!-- 分页部分 -->
        <el-pagination
          style="float:right;"
          v-if="showPagenation"
          layout="total, prev, pager, next, jumper,sizes"
          :current-page="pageRequest.pageNum"
          :page-size="pageRequest.pageSize"
          :total="totalSize"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="handleSizeChange"
          @current-change="handlePageChange">
        </el-pagination>
    </div>
</div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
import {
    exportExcel
} from "@/utils/excel";
import {
    formatDate
} from "@/utils/datetime";

export default {
    name: "jicTable",
    components: {
        KtButton
    },
    props: {
        tableList: Array, // 列表数据
        tableHeaderList: Array, // 表格头部数据
        data: Object, // 表格分页数据
        permsEdit: String, // 编辑权限标识
        permsDelete: String, // 删除权限标识

    //下架按钮
    showPushOperation: {
      //mock操作按钮
      type: Boolean,
      default: false
    },
    //启用按钮
      startUsing: {
      //mock操作按钮
      type: Boolean,
      default: false
    },
    conceal: {
      //mock操作按钮
      type: Boolean,
      default: false
    },
    //停用按钮
      blockUp: {
      //mock操作按钮
      type: Boolean,
      default: false
    },
    //上架按钮
    groundings: {
      //mock操作按钮
      type: Boolean,
      default: false
    },

        // 是否显示编辑按钮
        showEditOperation: {
            type: Boolean,
            default: false
        },
      // 是否显示编辑按钮
      classification: {
            type: Boolean,
            default: false
        },
        ShowAddJunior:{
            type: Boolean,
            default: false
        },

    // 是否显示删除按钮
    showDeleteOperation: {
      type: Boolean,
      default: false
    },

        // 是否显示详情按钮
        showDetailOperation: {
            type: Boolean,
            default: false
        },
        // 修改金额按钮
        showUpdateMoney: {
            type: Boolean,
            default: false
        },
        //        是否启用按钮
        showHandleStartorDisable: {
            type: Boolean,
            default: false
        },
      //查看上下级明细按钮
      showSuperiorAndSubordinate: {
        type: Boolean,
        default: false
      },
        // 是否显示初盘按钮
        showFirstOperation: {
            type: Boolean,
            default: false
        },
        // 是否显示复盘按钮
        showFinalOperation: {
            type: Boolean,
            default: false
        },
        // 是否显示差异确认按钮
        showConfirmOperation: {
            type: Boolean,
            default: false
        },
        //修改积分按钮
        showUpdateIntegral: {
            type: Boolean,
            default: false
        },

        // 是否显示自定义按钮
        showCustomOperation: {
            type: Boolean,
            default: false
        },

        // 自定义按钮的名称
        customLabel: {
            type: String,
            default: "自定义名称"
        },

        // 列表左侧底部是否显示批量删除(判断的一部分)
        showBatchDelete: {
            type: Boolean,
            default: true
        },

        // 是否显示右侧操作部分
        showOperation: {
            type: Boolean,
            default: true
        },

        // 表格右侧操作部分宽度
        operationWidth: {
            type: Number,
            default: 185
        },

        // 是否显示分页
        showPagenation: {
            type: Boolean,
            default: true
        },

        // 是否在左侧显示下表(1,2,3,4,5...)
        showIndex: {
            type: Boolean,
            default: true
        },

        // 左侧显示选择功能
        showSelection: {
            type: Boolean,
            default: true
        },

        // table尺寸
        size: {
            type: String,
            default: "mini"
        },

        // table文本对齐方式
        align: {
            type: String,
            default: "left"
        },

        // table表格最大高度
        maxHeight: {
            type: Number,
            default: 1500
        },

        // table表格默认高度
        height: {
            type: Number,
            default: 500
        },

        // table是否显示边框
        border: {
            type: Boolean,
            default: false
        },

        // table是否显示斑马线
        stripe: {
            type: Boolean,
            default: true
        },

        // table是否高亮当前行
        highlightCurrentRow: {
            type: Boolean,
            default: true
        },

        // table是否单行显示
        showOverflowTooltip: {
            type: Boolean,
            default: true
        },

    /* 分页部分对应的数据 */
    totalSize: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      btnStatus:1,
      // 分页信息
      pageRequest: {
        pageNum: 1,
        pageSize: 10
      },
      loading: false, // 加载标识
      selections: [] // 批量选择选中数据
    };
  },
    methods: {
        // 点击编辑按钮触发方法
        handleEdit(row) {
            console.log(row, "-----------组件编辑按钮---------");
            this.$emit("handleEdit", {
                row: row
            });
        },
      // 点击下级分类按钮触发方法
      SubclassificationMethod(row) {
            console.log(row, "-----------组件编辑按钮---------");
            this.$emit("SubclassificationMethod", {
                row: row
            });
        },
        handleLower: function (index, row) {
          this.$emit("handleLower", {index: index, row: row});
        },
      Auditmethods: function (index, row) {
        this.$emit("Auditmethods", {index: index, row: row});
      },
        AddJunior(row){
            console.log(row, "-----------组件新增下级按钮---------");
            this.$emit("AddJunior", {
                row: row
            });
        },
        grounding: function (index, row) {
          this.$emit("grounding", {index: index, row: row});
        },

      // 删除
      handleDelete: function (index, row) {
        this.delete(row.id);
      },
        updateMoney(row) {
            console.log(row, "-----------组件删除按钮---------");
            this.$emit("updateMoney", {
                row: row
            });
        },
        // 点击批量删除按钮触发方法
        handleBatchDelete() {
            let ids = this.selections.map(item => item.id).toString();
            console.log(ids, "--------组件批量删除ids--------");
            this.$emit("handleBatchDelete", {
                ids: ids
            });
        },

        // 点击详情按钮触发方法
        handleDetail(row) {
            console.log(row, "-----------组件详情按钮---------");
            this.$emit("handleDetail", {
                row: row
            });
        },
        updateIntegral(row) {
            console.log(row, "-----------组件修改积分按钮---------");
            this.$emit("updateIntegral", {
                row: row
            });
        },
        // 点击启用按钮触发方法
        handleStartorDisable(row) {
          console.log(row, "-----------组件按钮启用按钮---------");
          this.$emit("handleStartorDisable", { row: row });
        },
      // 点击展示上下级明细
      handleSuperiorAndSubordinate(row) {
        console.log(row, "-----------组件上下级明细按钮---------");
        this.$emit("handleSuperiorAndSubordinate", { row: row });
      },
      //停用按钮触发方法
      handleProhibitStatus(row) {
        console.log(row, "-----------组件按钮停用按钮---------");
        this.$emit("handleProhibitStatus", { row: row });
      },
    /*// 点击启用按钮触发方法
    handleStartorDisable(row) {
      this.btnStatus= this.btnStatus === 0 ? 1 :0;
      console.log(row, "-----------组件按钮启用按钮---------");
      this.$emit("handleStartorDisable", { row: row });
    },*/

        // 点击自定义按钮触发方法
        handleCustom(row) {
            console.log(row, "-----------组件自定义按钮---------");
            this.$emit("handleCustom", {
                row: row
            });
        },

        // 选中列表中的选项触发
        selectionChange(selections) {
            this.selections = selections;
            this.$emit("selectionChange", {
                selections: selections
            });
        },

        // 切换请求条数变化的时候触发
        handleSizeChange(pageSize) {
            console.log(pageSize, "------请求条数发生变化------");
            this.$emit("handleSizeChange", {
                size: pageSize
            });
        },
      // 删除操作
      delete: function (ids) {
        this.$confirm("确认删除选中记录吗？", "提示", {
          type: "warning"
        })
          .then(() => {
            let params = [];
            let idArray = (ids + "").split(",");
            for (var i = 0; i < idArray.length; i++) {
              params.push({id: idArray[i]});
            }
            //this.loading = true
            let callback = res => {
              if (res.code == "0000") {
                this.$message({message: "删除成功", type: "success"});
                this.init();
              } else {
                this.$message({message: "操作失败, " + res.msg, type: "error"});
              }
              this.loading = false;
            };
            this.$emit("handleDelete", {params: params, callback: callback});
          })
          .catch(() => {
          });
      },

        // 请求第几页的时候会触发
        handlePageChange(pageNum) {
            console.log(pageNum, "------请求页数发生变化------");
            this.$emit("handlePageChange", {
                number: pageNum
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.table-wrap {
    width: 100%;
    height: auto;
}

.toolbar {
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

/deep/ .el-table .sort-caret.ascending {
    border-bottom-color: #FFF;
    top: 5px;
}

/deep/ .el-table .sort-caret.descending {
    border-top-color: #FFF;
    bottom: 7px;
}

/deep/ .el-table .ascending .sort-caret.ascending {
    border-bottom-color: #2F4554;
}

/deep/ .el-table .descending .sort-caret.descending {
    border-top-color: #2F4554;
}
</style>
